<template>
	<div class="content">
	    <div class="cloud-header">
	      <h2 class="r-title-h2">首页推荐</h2>
	    </div>
	    
		<div class="cloud-body">
			<div class="r-rec-enable">
				<span style="color:red;margin-right: 5px;">*</span>启用首页推荐功能：<h-switch v-model="enable" :small="true"></h-switch>
				<Button color="primary" style="float: right" @click="intSave">保存</Button>
			</div>
			<div class="r-rec">
				<div class="r-rec-view">
					<img width="318" src="@/static/rec.png">
					<model :show="true" :list="list"></model>
				</div>
				<div class="r-rec-set">
					<div class="r-rec-title">内容推荐</div>
					<div class="r-rec-box">
						<div class="r-rec-content" v-for="item,index in list" :key="index">
							<p><label class="r-rec-label">推荐商家：</label><Select v-model="item.name" :datas="merchants" type="object" keyName="uuid" titleName="title" :deletable="deletable" v-width="163" :filterable="true" @change="intChangeShop($event,index)"></Select></p>
							<p><label class="r-rec-label">推荐类型：</label><Radio v-model="item.type" :datas="typelist"  keyName="key" titleName="title" @change="getContent(item.name.uuid,item.type,index)"></Radio></p>
							<p><label class="r-rec-label">名称：</label><input type="text" :value=" item.content.title || item.content.name" /></p>
							<i v-if="list.length >1" @click="intDel(index)" class="iconfont icon-delete8e r-rec-icon"></i>
						</div>
						<div class="r-item-add" @click="intListAdd">+</div>
					</div>
				</div>
				<div class="r-rec-select">
					<div v-show="config" class="r-card-goods">
						<div class="r-rec-title">{{ type }}列表</div>
						<div class="r-card-box">
							<div v-if="content.length > 0 ">
								<div class="r-goods-item"  v-for="item,index in content" :key="index">
									 <Radio :value='item' v-model="data">{{ type == '卡券' ? item.title : item.name}}</Radio>
								</div>
							</div>
							<div v-else class="r-rec-none">
								暂无数据
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import model from '@/components/home-model';
	export default{
		components:{
			model
		},
		data(){
			return {
				model_id:'',


				// 推荐内容
				data:'',
				index:'',
				type:'卡券',

				deletable:true,
				merchants: [],


				typelist: [
				{ title: '卡券', key: 'card' }, 
				// { title: '商品', key: 'goods' }
				],

				enable:false,
				list:[{
					type:'card',
					name:'',
					content:{title:''},
				},{
					type:'card',
					name:'',
					content:{title:''},
				},{
					type:'card',
					name:'',
					content:{title:''},
				}],

			    pagination: {
			        page: 1,
			        size: 10,
			        total: 1
			    },

				config:false,
				searchVal:'',

				content:[],

			}
		},
		mounted(){
			this.getMerchants();

			/**
			 *获取弹窗配置id
			 */
			this.getModel();
		},
		watch:{
			data:{
				handler(val,old){
					this.list[this.index]['content'] = val;
				},
				deep:true
			}
		},

		methods:{
			/**
			 * 获取弹窗配置id
			 * @return {[type]} [description]
			 */
			async getModel(){
				let ret  = await this.$cloud.deploy().get('sale_modal');
				if(ret){
					this.model_id = ret._id
					
					if(ret.data){
						this.enable = ret.data.data.enable;
						this.list = ret.data.data.config;
					}
				}else{
					this.$Message.error("网络异常，请稍后重试！");
				}
			},

			/**
			 * 保存首页推荐弹窗配置
			 * @return {[type]} [description]
			 */
			async intSave(){
				let complete = true;
				console.log('this',this.list)
				this.list.forEach(item =>{
					if(!item.name){
						console.log('title',item.title);
						complete = false;
					}
				})
				if(!complete){
					this.$Message.error("请完善配置之后在进行操作！");
					return false;
				}

				let data = {
					enable:this.enable,
					config:this.list,
				}
				let save = await this.$cloud.deploy().edit(this.model_id,data);
				if(save){
					this.$Message.success('保存首页推荐配置成功！');
				}else{
					this.$Message.error("网络异常，请稍后重试！");
				}
				
			},



			/**
			 * 添加推荐内容
			 * @return {[type]} [description]
			 */
			intListAdd(){
				let obj = {
					type:'card',
					uuid:'',
					content:{
						image_list:[]
					},
				}
				this.list.push(obj);
			},

			/**
			 * 删除多余选项
			 * @return {[type]} [description]
			 */
			intDel(index){
				if(this.list.length > 1){
					this.list.splice(index,1);
				}
			},


			/**
			 * 选择商户
			 * @param  {[type]} event [description]
			 * @param  {[type]} index [description]
			 * @return {[type]}       [description]
			 */
			intChangeShop(event,index){
				this.getContent(event.uuid,this.list[index]['type'],index);
			},


			/**
			 * 搜索推荐内容
			 * @param  {[type]} data [description]
			 * @return {[type]}      [description]
			 */
			intSearch(data){
				console.log('data',data);
			},



			/**
			 * 获取商家列表
			 * @return {[type]} [description]
			 */
			async getMerchants(){
				let select = {
					putaway:"1",
					content:{
						image_list:[]
					},
				}
				let ret  = await this.$cloud.multi().all();
				if(ret){
					this.merchants = ret;
				}else{
					this.$Message.error("网络异常，请稍后重试！");
				}
			},


			/**
			 * 获取对应商户的推荐内容
			 * @param  {[type]} _uniqueid  [商户唯一id]
			 * @param  {[type]} type  [推荐内容]
			 * @param  {[type]} index [推荐下标]
			 * @return {[type]}       [description]
			 */
			async getContent(_uniqueid,type,index){
				console.log('type',[type,_uniqueid]);
				if(!_uniqueid){
					return false;
				}
				let where = {
					_uniqueid:_uniqueid,
					putaway:"1"
				}

				this.index = index;
				this.config = true;
				let ret = '';
				if(type == 'card'){
					this.type = "卡券"
					ret = await this.$cloud.name('card').where(where).select();
				}else{
					this.type = "商品"
					ret = await this.$cloud.name('goods').where(where).select();
				}
				if(ret){
					this.content = ret;
					console.log('ret',ret)
				}else{
					this.$Message.error("网络异常，请稍后重试！");
				}

			},

		}
	}
</script>
<style type="text/css" lang="less">
.r-rec-enable{
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: solid 1px #efefef;
}
.r-rec{
	display: flex;
	justify-content: space-between;
	align-items:stretch;
	position:relative;
	height: 572px;
	max-width: 1050px;
	>div{
		/*flex: 1;*/

	}
	.r-rec-view{
		height: 572px;
		position: relative;
		img{
			height: 100%;
		}
	}
	.r-rec-set{
		flex:1;
		min-width: 340px;
		margin-left: 20px;
		border:solid 1px #ededed;
		background-color: rgb(244, 245, 249);
	}
	.r-card-goods{
		margin-left: 20px;
		height: 100%;
		border:solid 1px #ededed;
		background-color: rgb(244, 245, 249);
	}
	.r-rec-select{
		flex: 1;
	}
	.r-rec-box{
		height: calc(100% - 62px);
		overflow: hidden;
		overflow-y: auto;
	}
	.r-rec-title{
		border-bottom: dashed 1px #ededed;
		padding:10px 20px;
		margin-top: 10px;
	}
	.r-item-add{
		border: solid 1px #ededed;
		border-top: 0px;
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
		width: 60px; 
		margin:0px auto;
		text-align: center;
		margin-top: -20px;
		cursor: pointer;
		&:active{
			background-color: #efefef;
		}
	}
	.r-rec-content{
		margin:20px 30px;
		padding-bottom: 10px;
		border-bottom: solid 1px #ededed;
		position: relative;
		.r-rec-label{
			width: 80px;
			text-align: right;
		}
		.r-rec-icon{
			position: absolute;
			right: 0px;
			top: 30%;
			cursor: pointer;
			color: red;
			&:active{
				color: rgba(255,0,0,0.5);
			}
		}
		p{
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
	}
	.r-card-box{
		margin: 20px;
	}
	.r-rec-none{
		text-align: center;
		color: #666;
	}
}
</style>